<template>
  <div>
    <!--    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">-->
    <!--      <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>-->
    <!--    </ul>-->
    <div>
      <tabbar :dataLsit="dataLsit" @clickEvent="wasClicked" :title="'分类'"></tabbar>
      <tabbar :dataLsit="language" @clickEvent="classification" :title="'语种'"></tabbar>
      <tabbar :dataLsit="initials" @clickEvent="sequence" :title="'首字母'" :fristname="'热门'"></tabbar>
    </div>
    <span class="cradSong">
      <div v-for="item in dailyList" :key="item.id">
      <card :src="item.picUrl" :description='item.name'
            @click="$router.push( {path: '/singerDetails' ,query: {id:item.id}})"></card>
      </div>
    </span>
    <div style="height: 230px;"></div>
  </div>
</template>

<script setup>
import tabbar from "~/pages/fristPage/singer/components/tabbar.vue"
import {ref, watch} from "vue";
import {GetsingerCategoryApi} from "~/commonApi/api"
import card from "~/components/card.vue"

const dataLsit = ref([
  {name: '全部', key: '-1'},
  {name: '男歌手', key: '1'},
  {name: '女歌手', key: '2'},
  {name: '乐队', key: '3'}
])
const language = ref([
  {name: '全部', key: '-1'},
  {name: '华语', key: '7'},
  {name: '欧美', key: '96'},
  {name: '日本', key: '8'},
  {name: '韩国', key: '16'},
  {name: '其他', key: '0'}
])
const initials = ref([
  {name: '热门', key: '-1'},
  {name: 'A', key: 'a'},
  {name: 'B', key: 'b'},
  {name: 'C', key: 'c'},
  {name: 'D', key: 'd'},
  {name: 'E', key: 'e'},
  {name: 'F', key: 'f'},
  {name: 'G', key: 'g'},
  {name: 'H', key: 'h'},
  {name: 'I', key: 'i'},
  {name: 'J', key: 'j'},
  {name: 'K', key: 'k'},
  {name: 'L', key: 'l'},
  {name: 'M', key: 'm'},
  {name: 'N', key: 'n'},
  {name: 'O', key: 'o'},
  {name: 'P', key: 'p'},
  {name: 'Q', key: 'q'},
  {name: 'R', key: 'r'},
  {name: 'S', key: 's'},
  {name: 'T', key: 't'},
  {name: 'U', key: 'u'},
  {name: 'V', key: 'v'},
  {name: 'W', key: 'w'},
  {name: 'X', key: 'x'},
  {name: 'Y', key: 'y'},
  {name: 'Z', key: 'z'},
])
//type 分类
const type = ref('-1')
const wasClicked = (item) => {
  type.value = item.key
}
//area 国家
const area = ref('-1')
const classification = (item) => {
  area.value = item.key
}
const initial = ref('-1')
const sequence = (item, index) => {
  initial.value = item.key
  console.log(initial.value, ' initial.value')
}

const dailyList = ref([])
const Getdata = async () => {
  const res = await GetsingerCategoryApi({type: type.value, area: area.value, initial: initial.value})
  dailyList.value = res.artists
}
/**
 * type:分类
 * area:语种
 * initial:首字母
 * 监视三个值有一个变化就直接请求
 */
watch([type, area, initial], (newVal, oldVal) => {
  Getdata()
})


Getdata()
</script>

<style scoped lang="scss">
.cradSong {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 20%);
}

</style>